<template>
    <div id="app">
        设备编号 <el-input v-model="selectCode" style="width: 200px;"></el-input>
        <el-button type="primary" style="height: 35px;" @click="getSysElectricityUseList(1)">
            <i class="el-icon-search">搜索</i></el-button>
        <el-button style="height: 35px;" @click="reset"><i class="el-icon-refresh">重置</i></el-button>
        <el-table :data="sysElectricityUseList" style="width: 100%">
            <el-table-column prop="device_id" label="设备编号" width="200">
                <template slot-scope="scope">
                    <el-button type="text">{{scope.row.deviceId}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="location" label="设备位置" width="220">
                <template slot-scope="scope">
                    <el-button type="text">{{scope.row.location}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="use_cost" label="扣费金额" width="200">
                <template slot-scope="scope">
                    <el-button type="text">{{scope.row.useCost}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="use_water" label="扣除数量" width="200">
                <template slot-scope="scope">
                    <el-button type="text">{{scope.row.useWater}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="befor_use_balance" label="扣除前余额" width="200">
                <template slot-scope="scope">
                    <el-button type="text">{{scope.row.beforUseBalance}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="befor_use_water" label="扣除前数量" width="200">
                <template slot-scope="scope">
                    <el-button type="text">{{scope.row.beforUseWater}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="统计时间" width="220">
                <template slot-scope="scope">
                    <el-button type="text">{{scope.row.createTime}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 30px;margin-left: 1150px;" v-if="pageCount>=1">
                <el-button-group>
                    <el-button type="primary" icon="el-icon-arrow-left" @click="prevPage">上一页</el-button>
                    <el-button><span>{{pageNum}} / {{pageCount}}</span></el-button>
                    <el-button type="primary" @click="nextPage">下一页<i
                            class="el-icon-arrow-right el-icon--right"></i></el-button>
                </el-button-group>
            </div>
    </div>
</template>
<script>
    import axios from 'axios';
    export default {
        name: 'app',
        data() {
            return {
                sysElectricityUseList:[],
                pageNum: 1,
                pageSize: 10,
                pageCount: '',
                selectCode:''
            }
        },
        created(){
            this.getSysElectricityUseList(1);
        },
        methods: {
            prevPage() {
                this.pageNum--;
                var pageNum = this.pageNum;
                if (this.pageNum >= 1) {
                    this.getSysElectricityUseList(pageNum);
                } else {
                    this.getSysElectricityUseList(1);
                }
            },
            nextPage() {
                this.pageNum++;
                var pageNum = this.pageNum;
                if (this.pageNum <= this.pageCount) {
                    this.getSysElectricityUseList(pageNum);
                } else {
                    this.getSysElectricityUseList(this.pageCount);
                }
            },
            getSysElectricityUseList(pageNum){
                this.pageNum = pageNum;
                let Authorization = localStorage.getItem("Authorization");
                axios({
                    url: 'http://localhost:9002/sys/electricityUse/getSysElectricityUseList',
                    method: 'post',
                    params: {
                        pageNum: this.pageNum,
                        pageSize: 10,
                        deviceId:this.selectCode
                    },
                    headers: {
                        'Authorization': Authorization
                    }
                })
                .then(response => {
                    this.sysElectricityUseList = response.data.data.sysElectricityUseList;
                    this.pageCount = response.data.data.pageCount;
                    console.log(this.sysElectricityUseList);
                })
            },
            reset(){
                this.selectCode = '';
                this.getSysElectricityUseList(1);
            }
        }
    }
</script>